<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Bootstrap小案例</title>
</head>

<body>
    <main>
        <div class="card">
            <ul>
                <li>
                    <a href="01-firstDemo">入门</a>
                </li>
                <li>
                    <a href="02-typograpyDemo">排版</a>
                </li>
                <li>
                    <a href="03-gridDemo">栅格系统</a>
                </li>
                <li>
                    <a href="04-codeDemo">代码片段</a>
                </li>
                <li>
                    <a href="05-tableDemo">表格</a>
                </li>
            </ul>
        </div>
        <div class="card">
            <ul>

                <li>
                    <a href="06-formDemo">表单</a>
                </li>
                <li>
                    <a href="07-button&ImgDemo">按钮与图片</a>
                </li>
                <li>
                    <a href="08-dropDownMenuDemo">下拉菜单</a>
                </li>
                <li>
                    <a href="09-buttonGroupDemo">按钮组</a>
                </li>
                <li>
                    <a href="10-buttonDropDownMenuDemo">按钮式下拉菜单</a>
                </li>
                </li>
            </ul>
        </div>
        <div class="card">
            <ul>
                <li>
                    <a href="11-inputGroupDemo">输入框组</a>
                </li>
                <li>
                    <a href="12-navDemo">导航</a>
                    <li>
                        <a href="13-navBarDemo">导航条</a>
                    </li>
                    <li>
                        <a href="14-mediaObjectDemo">媒体对象</a>
                    </li>
                    <li>
                        <a href="15-panelDemo">面板</a>
                    </li>
                </li>
            </ul>
        </div>
        <div class="card">
            <ul>
                <li>
                    <a href="16-wellComponentDemo">well组件</a>
                </li>
                <li>
                    <a href="17-page&LabelDemo">分页和标签</a>
                </li>
                <li>
                    <a href="18-badge&JumbotronDemo">徽章与巨幕组件</a>
                </li>
                <li>
                    <a href="19-pageHeader&ThumbnailDemo">页头和缩略图</a>
                </li>
                <li>
                    <a href="20-alertDemo">警告框</a>
                </li>
            </ul>
        </div>
        <div class="card">
            <ul>
                <li>
                    <a href="21-progressbarDemo">进度条</a>
                </li>
                <li>
                    <a href="22-listGroupDemo">列表组</a>
                </li>
                <li>
                    <a href="23-transitionDemo">过渡效果</a>
                </li>
                <li>
                    <a href="24-modalDemo">模态框</a>
                </li>
                <li>
                    <a href="25-dropDownDemo">下拉效果</a>
                </li>
            </ul>
        </div>
        <div class="card">
            <ul>
                <li>
                    <a href="26-scrollDemo">滚动监听</a>
                </li>
                <li>
                    <a href="27-tabsDemo">标签页</a>
                </li>
                <li>
                    <a href="28-toolsDemo">工具提示</a>
                </li>
                <li>
                    <a href="29-popoverDemo">弹出框</a>
                </li>
                <li>
                    <a href="30-collapseDemo">坍方</a>
                </li>
            </ul>
        </div>
        <div class="card">
            <ul>
                <li>
                    <a href="31-carouselDemo">轮播图</a>
                </li>
                <li>
                    <a href="32-affixDemo">侧边栏停靠</a>
                </li>
            </ul>
        </div>
    </main>
</body>

</html>